let id = sessionStorage.id;
$.getJSON("http://192.168.20.41/daojucheng-juchengpin/project/php/sever.php?key=?", `hide=details&id=${id}`, data => {
    let info = data[0];
    console.log(info);  
    //渲染
    let index = $(`<a href='jc_index.html' target='_blank' class='index-link'>商城首页></a> <em>${info.name}</em>`);
    $(".comm-tit").append(index);
    //大图
    if (info.status == 0) {
        let status = $(`<div class="i-out"><span class="mark-txt">暂缺货</span></div>`)
        $(".picshow").append(status);
    } else if (info.status == 1) {
        let status = $(`<div class="ico-comm i-mark"><span class="mark-txt">折扣</span></div>`)
        $(".picshow").append(status);
    } else if (info.status == 2) {
        let status = $(`<div class="ico-comm i-mark"><span class="mark-txt">新品</span></div>`)
        $(".picshow").append(status);
    } else if (info.status == 3) {
        let status = $(`<div class="ico-comm i-mark"><span class="mark-txt">限定新品</span></div>`)
        $(".picshow").append(status);
    }
    let bimg = $(`<a href="javascript:;" class="product-image image-zoom MagicZoom" style="display: inline-block; position: relative; text-decoration: none; outline: 0px; overflow: hidden;">
                    <img src="../img/${info.link}" width="570" height="570">
                    <div class="MagicZoomPup" style="z-index: 10; position: absolute; overflow: hidden; display: none; visibility: hidden; width: 304px; height: 291px; opacity: 0.5; left: 154px; top: 147px;"></div>
                    <div class="MagicZoomBigImageCont inner-zoom" style="position: relative; z-index: 10; left: 0px; top: 0px; padding: 3px; display: none; visibility: hidden;">
                        <div class="MagicZoomHeader" style="position: relative; z-index: 10; left: 0px; top: 0px; padding: 3px; display: none; visibility: hidden;"></div>
                        <div style="overflow: hidden;">
                            <img src="../img/${info.link}" style="padding: 0px; margin: 0px; border: 0px; width: auto; height: auto; position: relative; left: -102.8px; top: -171.8px; transform: translateZ(0px);">
                        </div>
                    </div>
                </a>`)
    $(".picshow").append(bimg);
    //小图片
    let imgs = info.img.split("&");
    let li = $(`<li class="active"><a href="javascript:;"><img onclick='imgs(this)' src="../img/${info.link}" width="74" height="74"></a></li>`);
    $(".picdetail-list").append(li);
    imgs.forEach((img, i) => {
        let li = $(`<li><a href="javascript:;"><img onclick='imgs(this)' src="../img/${img}" width="74" height="74"></a></li>`);
        $(".picdetail-list").append(li);
    });
    //标题
    let tit = $(`<h3 class="pord-name">${info.name}</h3>`);
    let price = $(`<div class="pord-price clearfix" style="height:auto;"><span class="fl pord-dispri">￥<strong>${info.newprice}</strong></span><span class="fl pord-orpri">￥${info.oldprice}</span></div>`);
    let discount = $(`<div class="pord-saleinfo clearfix"><div class="fl pord-salebox"><i class="ico-detail ico-discount">折</i><span> 限时优惠${(info.oldprice - info.newprice).toFixed(2)}元</span></div></div>`);
    $(".product-info").append(tit);
    $(".product-info").append(price);
    $(".product-info").append(discount);
    if (info.content.length != 0) {
        let div = $(`<div class="pord-gift clearfix"><i class="gift-mark">满赠</i><span>${info.content}</span><a href="javascript:;" class="gift-link">详情</a></div>`);
        $(".product-info").append(div);
    }
    //类型
    let divs = $(`<div></div>`);
    if (info.other.length != 0) {
        let others = $(`<div class="mt10 pord-color pord-sellist clearfix"></div>`);
        let label = $(`<label class="fl">类型</label>`);
        let ul = $(`<ul class="fl ml28"></ul>`);
        let arr = info.other.split("&");
        arr.forEach((obj, i) => {
            if (i == 0) {
                let li = $(`<li class="current" style="overflow:hidden;"><div onclick="styles(this)" class="pord-selbox">${obj}</div></li>`);
                ul.append(li);
            } else {
                let li = $(`<li class="" style="overflow:hidden;"><div onclick="styles(this)" class="pord-selbox">${obj}</div></li>`);
                ul.append(li);
            }
        })
        others.append(label);
        others.append(ul);
        divs.append(others);
    }
    //颜色
    if (info.color.length != 0) {
        let colors = $(`<div class="mt10 pord-color pord-sellist clearfix"></div>`);
        let label = $(`<label class="fl">颜色</label>`);
        let ul = $(`<ul class="fl ml28"></ul>`);
        let arr = info.color.split("&");
        for (let i = 0; i < arr.length; i++) {
            if (i == 0) {
                let li = $(`<li class="current" style="overflow:hidden;"><div onclick="colors(this)" class="pord-selbox">${arr[i]}</div></li>`);
                ul.append(li);
            } else {
                let li = $(`<li class="" style="overflow:hidden;"><div onclick="colors(this)" class="pord-selbox">${arr[i]}</div></li>`);
                ul.append(li);
            }
        }
        colors.append(label);
        colors.append(ul);
        divs.append(colors);
    }
    //尺码
    if (info.size.length != 0) {
        let arr = info.size.split("&");
        let sizes = $(`<div class="mt10 pord-color pord-sellist clearfix"></div>`)
        let label = $(`<label class="fl">尺码</label>`);
        let ul = $(`<ul class="fl ml28"></ul>`);
        for (let i = 0; i < arr.length; i++) {
            if (i == 0) {
                let li = $(`<li class="current" style="overflow:hidden;"><div onclick="sizes(this)" class="pord-selbox">${arr[i]}</div></li>`);
                ul.append(li);
            } else {
                let li = $(`<li class="" style="overflow:hidden;"><div onclick="sizes(this)" class="pord-selbox">${arr[i]}</div></li>`);
                ul.append(li);
            }
        }
        sizes.append(label);
        sizes.append(ul);
        divs.append(sizes);
    }
    //数量
    let divs1 = $(`<div></div>`);
    let numbers = $(`<div class="mt10 pord-num clearfix"></div>`);
    let label = $(`<label class="fl pt10">数量</label>`);
    let ipu = $(`<div class="fl ml42">
                    <a onclick="decrease(this,${info.number})" href="javascript:;" class="fl num-plus numbtn num-plus btn_detail_main_buy_min">
                        <i class="ico-detail">-</i>
                    </a>
                    <input onchange="change(this,${info.number})" class="fl nummidbtn num inpt_detail_main_buy_num" value="1">
                    <a onclick="increase(this,${info.number})" href="javascript:;" class="fl numbtn num-minus btn_detail_main_buy_plus">
                        <i class="ico-detail">+</i>
                    </a>
                </div>`);
    numbers.append(label);
    numbers.append(ipu);
    if (info.number >= 100) {
        let num = $(`<span class="pord-stock">(库存充足)</span>`);
        numbers.append(num);
    } else {
        let num = $(`<span class="pord-stock">(还剩${info.number}件)</span>`);
        numbers.append(num);
    }
    divs1.append(numbers);
    //购物车&收藏

    if (info.number > 0) {
        let btns = $(`<div class="pord-btn clearfix">
                            <a onclick="addCart(this)" href="javascript:;" class="fl joincart-btn">加入购物车</a>
                            <a href="../html/jc_shoppingCart.html" class="fl ml30 buy-btn">立即购买</a>
                            <a onclick="collect(this)" href="javascript:;" class="fl btn-collect">
                                <i class="ico-detail ico-collect"></i>
                                <span>收藏</span>
                            </a>
                            
                        </div>`);
        divs1.append(btns);
    } else {
        let btns = $(`<div class="pord-btn clearfix">
                            <a href="javascript:;" class="fl joincart-btn">到货提醒</a>
                            <a onclick="collect(this)" href="javascript:;" class="fl btn-collect">
                                <i class="ico-detail ico-collect"></i>
                                <span>收藏</span>
                            </a>
                            
                        </div>`);
        divs1.append(btns);
    }

    $(".product-info").append(divs);
    $(".product-info").append(divs1);
}, "JSON")
//选项卡、
let s1 = document.querySelectorAll(".pord-tab>ul>li"),
    s2 = document.querySelectorAll(".tabcont>div");
for (let i = 0; i < s1.length; i++) {
    s1[i].onclick = () => {
        $(s1[i]).addClass("curtab").siblings().removeClass("curtab");
        $(s2[i]).css("display", "block").siblings().css("display", "none");
    }
}
//增加数量
function increase(e, num) {
    if ($(".num").val() < num) {
        $(".num").val(parseInt($(".num").val()) + 1);
    }
    if ($(".num").val() > num) {
        $(".pord-stock").html("超出库存数量！").css("color", "red");
    } else {
        $(".pord-stock").html(`(还剩${num}件)`).css("color", "#5e6360");
    }
}
//减少数量
function decrease(e, num) {
    if ($(".num").val() > 1) {
        $(".num").val(parseInt($(".num").val()) - 1);
        if ($(".num").val() > num) {
            $(".pord-stock").html("超出库存数量！").css("color", "red");
        } else {
            $(".pord-stock").html(`(还剩${num}件)`).css("color", "#5e6360");
        }
    } else {
        $(".pord-stock").html(`(还剩${num}件)`).css("color", "#5e6360");
    }
}
//输入数量
function change(e, num) {
    if ($(".num").val() > num) {
        $(".pord-stock").html("超出库存数量！").css("color", "red");
    } else {
        $(".pord-stock").html(`(还剩${num}件)`).css("color", "#5e6360");
    }
}
//小图片点击切换
function imgs(e) {
    e = window.event;
    target = e.srcElement;
    $(target).parent().parent().css("border-color", "#f74a4a").siblings().css("border-color", "#f2f2f2");
    let link = $(target).attr('src')
    $(".product-image>img").attr('src', link);
}
//颜色
function colors(e) {
    e = window.event;
    target = e.srcElement;
    $(target).parent().addClass("current").siblings().removeClass("current");
    // console.log($(target).html())
}
//尺寸
function sizes(e) {
    e = window.event;
    target = e.srcElement;
    $(target).parent().addClass("current").siblings().removeClass("current");
    // console.log($(target).html())
}
//类型
function styles(e) {
    e = window.event;
    target = e.srcElement;
    $(target).parent().addClass("current").siblings().removeClass("current");
    // console.log($(target).html())
}



// 获取全部商品信息
$.get("../php/jc_person.php", `hide=getGood`, data => {
    data.forEach(obj => {
        if (obj.id == id) {
            sessionStorage.goodid = id;
        }
    })
}, "JSON")


//收藏
if (sessionStorage.uname) {
    $.get("../php/jc_person.php", `hide=findcollect`, data => {
        data.forEach(obj => {
            if (sessionStorage.goodid == obj.goodsid && sessionStorage.uid == obj.userid) {
                console.log($("div.pord-btn"))
                // $(obj).attr("class","fl btn-collect btn-collected")
            }
            
            // $(e.currentTarget).attr("cid","")
        })
    }, "JSON")

    function collect(e) {
        e = window.event;
        target = e.srcElement;
        if (target.children.length == 0) {
            $(target).parent().toggleClass("btn-collected");
        } else {
            $(target).toggleClass("btn-collected");
        }

        var name = $(".pord-name").html();
        var img = $("a.MagicZoom>img").attr("src");
        var oldprice = $("span.pord-orpri").html().slice(1);
        var newprice = $("span.pord-dispri>strong").html();

    
        if ($(e.currentTarget).attr("class") == "fl btn-collect btn-collected") {
            $.get("../php/jc_person.php", `hide=addcollect&name=${name}&goodid=${sessionStorage.goodid}&userid=${sessionStorage.uid}&oldprice=${oldprice}&newprice=${newprice}&img=${img}`,data=>{
                console.log(data)
            })
        } else if ($(e.currentTarget).attr("class") == "fl btn-collect") {
            $.get("../php/jc_person.php", "hide=delcollect")
        }

    }
}

//加入购物车
if (sessionStorage.uname) {
    function addCart(e) {
        e = window.event;
        target = e.srcElement;
        var name = $(".pord-name").html();
        var img = $("a.MagicZoom>img").attr("src");
        var oldprice = $("span.pord-orpri").html().slice(1);
        var newprice = $("span.pord-dispri>strong").html();
        var count = $(".pord-num input").val();

        // 添加商品信息
        $.get("../php/jc_person.php", `hide=addGood&name=${name}&goodid=${sessionStorage.goodid}&userid=${sessionStorage.uid}&oldprice=${oldprice}&newprice=${newprice}&count=${count}&img=${img}`)
        history.go(0)
    }
}



//评论
let uid = sessionStorage.uid,
    uname = sessionStorage.uname,
    uhead = sessionStorage.img;
if (uid) {
    if (uid != "") {
        // console.log(sessionStorage.id);
        $.getJSON("http://192.168.20.41/daojucheng-juchengpin/project/php/sever.php?key=?", `hide=ifdiscus&gid=${id}&uid=${uid}`, data => {
            if (data == 1) {
                console.log("有写评论");
                $(".btn-danger")[0].innerText = "修改评论";
                $.getJSON("http://192.168.20.41/daojucheng-juchengpin/project/php/sever.php?key=?", `hide=rewrite&gid=${id}&uid=${uid}`, data => {
                    $("textarea").val(data);
                    $(".hid1").attr("name", "uid").val(uid);
                    $(".hid2").attr("name", "gid").val(id);
                    $(".hid3").attr("name", "hide").val("xiugai");
                    $(".btn-danger").click((e) => {
                        let stars = $(".iputbox>input:checked").val();
                        let time = getDate() + " " + getTime();
                        $(".hid4").attr("name", "time").val(time);
                        // console.log(time);
                        if (stars) {
                            $(".hid5").attr("name", "stars").val(stars);
                            console.log(1)
                        } else {
                            return false;
                        }
                    })
                    // console.log(data);
                })
            } else {
                console.log("没有写评论");
                // $(".btn-danger").html("增加评论");
                $(".btn-danger")[0].innerText = "增加评论";
                $.getJSON("http://192.168.20.41/daojucheng-juchengpin/project/php/sever.php?key=?", `hide=inwrite&gid=${id}&uid=${uid}`, data => {
                    $(".hid1").attr("name", "uid").val(uid);
                    $(".hid2").attr("name", "gid").val(id);
                    $(".hid3").attr("name", "hide").val("zengjia");
                    $(".btn-danger").click((e) => {
                        let stars = $(".iputbox>input:checked").val();
                        let time = getDate() + " " + getTime();
                        $(".hid4").attr("name", "time").val(time);
                        // console.log(time);
                        $(".hid6").attr("name", "uname").val(sessionStorage.uname);
                        $(".hid7").attr("name", "uimg").val(sessionStorage.img);
                        if (stars) {
                            $(".hid5").attr("name", "stars").val(stars);
                            console.log(1)
                        } else {
                            return false;
                        }
                    })
                })
            }
        }, "JSON");
    }
}
$.getJSON("http://192.168.20.41/daojucheng-juchengpin/project/php/sever.php?key=?", `hide=comment&gid=${id}`, data => {
    console.log(data);
    let gid = sessionStorage.id;
    let num = 0, nn = 0, ss = 0;
    data.forEach((val, i) => {
        if (gid == val.good_id) {
            nn++;
            ss += parseInt(val.score);
            let li = $(`<li>
                            <div class="fl headimg">
                                <div class="imgbox">
                                    <img src="../img/${val.headphoto}" width="58" height="58">
                                </div>
                                <p class="qqnick">${val.name}</p>
                            </div>
                            <div class="fl comment-text">
                                <div class="comment-point clearfix">
                                    <span class="fl">商品评分</span>
                                    <div class="fl pord-starbox">
                                        <i class="ico-detail i-star${2 * val.score}"></i>
                                    </div>
                                    <span class="fl all-point ml5">${val.score}</span>
                                    <i class="fl cent-mark">精彩评论</i>
                                    <div class="fr comment-time">${val.dateTime}</div>
                                </div>
                                <p class="text-detail">${val.discus}</p>
                                <div class="ser-reply clearfix">
                                    <span class="fl">官方周边商城回复：</span>
                                    <span class="fl reply-txt">感谢你的支持！十年磨一剑，百炼凝一枪！匠心打造只为您的这一句肯定！</span>
                                </div>
                            </div>
                        </li>`);
            $(".cent-ul").append(li);
        }
        $(".pord-tab>ul>li:eq(1)>span").html(`(${nn})`);
        $(".p-f").html(`共${nn}条记录`);
        // num = num + parseInt(val.score);   
        //  
        // console.log(sessionStorage.id);
    })
    if (ss == 0) {
        $(".all-point:eq(0)").html(`0.0`);
        $(".ico-detail:eq(4)").addClass(`i-star0`);
    } else {
        let score = (ss / nn).toFixed(0);
        $(".all-point:eq(0)").html(`${score}.0`);
        $(".ico-detail:eq(4)").addClass(`i-star${2 * score}`);
    }
}, "JSON");


//星级打分
let starinpt = document.querySelectorAll(".iputbox>input");
for (let i = 0; i < starinpt.length; i++) {
    starinpt[i].onclick = () => {
        for (let j = 0; j < starinpt.length; j++) {
            starinpt[j].checked = false;
        }
        starinpt[i].checked = "checked";
    }
}
//button提交修改





//获取日期
//获取当前日期
function getDate() {
    var d = new Date();
    var nian = d.getFullYear();
    var yue = d.getMonth() + 1;
    var ri = d.getDate();
    if (ri >= 1 && ri <= 9) { ri = "0" + ri };
    if (yue >= 1 && yue <= 9) { yue = "0" + yue };
    var riqi = nian + "-" + yue + "-" + ri;
    return riqi;
}
//获取当前时间
function getTime() {
    var t = new Date();
    var xiaoshi = t.getHours();
    var fenzhong = t.getMinutes()
    var miao = t.getSeconds();
    if (xiaoshi >= 0 && xiaoshi <= 9) { xiaoshi = "0" + xiaoshi };
    if (fenzhong >= 0 && fenzhong <= 9) { fenzhong = "0" + fenzhong };
    if (miao >= 0 && miao <= 9) { miao = "0" + miao };
    var shijian = xiaoshi + ":" + fenzhong + ":" + miao;
    return shijian;
}
//无人登录时不显示修改、增加评论
if (sessionStorage.uname) {
    if (sessionStorage.uname == "") {
        $(".pord-tab>ul>li:eq(3)").css("display", "none");
        $("textarea").css("display:none");
    }
} else {
    $(".pord-tab>ul>li:eq(3)").css("display", "none");
    $("textarea").css("display:none");
}
console.log($(".pord-tab>ul>li:eq(3)"));